<template>
  <div id="index">
    <Navs></Navs>
    <div id="main">
      <Asi></Asi>
      <span v-show="isShow" @click="pull">◀</span>
      <span v-show="!isShow" @click="push">▶</span>
      <div id="main_right">
        <router-view></router-view>
      </div>
    </div>
    <Bot></Bot>
  </div>
</template>

<script>
import Navs from './Navs.vue';
import Bot from './Bot.vue';
import Asi from './Aside.vue';

import { mapGetters, mapActions } from 'vuex';

export default {
  data() {
    return {

    }
  },
  computed: mapGetters([
    'isShow'
  ]),
  components: {
    Navs, Bot, Asi
  },
  methods: {
    pull() {
      $('#aside').animate({ width: 0 }, function() {
        $('#aside').css({ display: 'none' });
        $('#main_right').css({ width: 98 + '%' })
      });
      this.$store.dispatch("showPull")
    },
    push() {
      $('#aside').css({ display: 'block' });
      $('#aside').animate({ width: 20 + '%' })
      $('#main_right').css({ width: 78 + '%' })
      this.$store.dispatch("showPush")
    }
  },
  mounted(){

  }
}
</script>

<style>
#index{
  width: 100%;
  height: 100%;
}

#main {
	width: 100%;
	border-top: 1px solid #ccc;
  height:88%;
  overflow-x: hidden;
}

#main>span {
	width: 2%;
	float: left;
	position: fixed;
	top: 50%;
	cursor: pointer;
	animation: jumpLeft 0.5s infinite alternate;
	color:rgba(0,0,0,0.6);
  font-size: 18px;
}
#main>span:hover{
  color:rgba(0,0,0,1);
  font-size: 20px;
}
@keyframes jumpLeft {
	from {
		margin-left: -2px;
	}
	to {
		margin-left: 2px;
	}
}

#main>span:hover {
	font-size: 20px;
}
#main_right {
	float: left;
	margin-left: 20px;
	width: 78%;
	height: 100%;
}
#bot{
  width: 100%;
}
</style>

